<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>健康指数</span>
            </div>
          </template>
          <div class="card-body">
            <div class="number">85</div>
            <div class="text">良好</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>今日步数</span>
            </div>
          </template>
          <div class="card-body">
            <div class="number">8,546</div>
            <div class="text">步</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>饮食建议</span>
            </div>
          </template>
          <div class="card-body">
            <div class="number">3</div>
            <div class="text">条新建议</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>未读文章</span>
            </div>
          </template>
          <div class="card-body">
            <div class="number">5</div>
            <div class="text">篇</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>健康趋势</span>
            </div>
          </template>
          <div style="height: 300px;">
            <!-- 这里可以放图表 -->
            <div class="placeholder">健康数据趋势图</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最新动态</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activities = ref([
  {
    content: '完成今日运动计划',
    timestamp: '20分钟前'
  },
  {
    content: '记录血压数据',
    timestamp: '1小时前'
  },
  {
    content: '阅读健康文章',
    timestamp: '2小时前'
  },
  {
    content: '更新饮食记录',
    timestamp: '5小时前'
  }
])
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.dashboard-card {
  .card-body {
    text-align: center;
    padding: 20px 0;
  }
  
  .number {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
  
  .text {
    font-size: 14px;
    color: #909399;
    margin-top: 10px;
  }
}

.placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 